<template>
	<view class="home">
		<custom-navbar title="找空间" :show-back="true" @back="handleBack" />

		<view class="content pb150" :style="{ paddingTop: navBarHeight + 'px' }">
			<!-- 主园区全景 -->
			<view class="box" v-for="(item, index) in spaceList" :key="index" @click="enterAR(item.vr_link)"
				:style="{backgroundImage: `url(${item.space_image})`}">
				<view class="tilte fcc">
					<view class="f30c6 mt60" style="font-weight: bold;color: #FFFFFF;">{{item.space_title}}</view>
					<image class="tliteimg" src="/static/images/home/波浪.svg"></image>
				</view>

				<!-- AR入口按钮 -->
				<!-- 	<view class="ar-entry" @click="enterAR(item.vr_link)">
					<image src="/static/images/ar/ar-icon.png" mode="aspectFit"></image>
					<text>AR全景</text>
				</view> -->

				<!-- 方向导航区 -->
				<view class="boxbttoom fcc">
					<view class="item" v-for="(dir, i) in directions" :key="i" @click="switchDirection(dir, item)">
						<view class="orientation fcc">{{dir}}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- AR全屏容器 -->
		<view class="ar-container" v-if="showAR">
			<!-- 方案1：使用web-view（适合外部链接） -->
			<web-view v-if="isWebView" :src="currentARLink" @message="handleWebViewMessage"></web-view>

			<!-- 方案2：使用内置AR/VR组件（需要小程序支持） -->
			<!-- 	<vr-viewer v-else :src="currentARContent" mode="vr" @ready="onVrReady" @error="onVrError"></vr-viewer>

			<view class="ar-controls">
				<button @click="exitAR" class="exit-btn">退出AR</button>
				<button v-if="showDirectionControls" @click="rotateView('left')" class="control-btn">←</button>
				<button v-if="showDirectionControls" @click="rotateView('right')" class="control-btn">→</button>
			</view> -->
		</view>

		<custom-tabbar v-show="!showAR" />
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import CustomNavbar from '@/components/custom-navbar.vue'
	import CustomTabbar from '@/components/custom-tabbar.vue'
	import {
		lists
	} from '@/api/findSpace'

	const systemInfo = uni.getSystemInfoSync()
	const navBarHeight = systemInfo.statusBarHeight + 44

	const spaceList = ref([])
	const directions = ref(['东', '南', '西', '北'])
	const showAR = ref(false)
	const currentARLink = ref('')
	const isWebView = ref(true) // 默认使用web-view
	const currentARContent = ref(null)
	const showDirectionControls = ref(false)

	// 获取空间数据
	const fetchSpaceData = async () => {
		try {
			const res = await lists()
			if (res.code === 200) {
				spaceList.value = res.data.map(item => ({
					...item,
					// 添加方向对应的不同链接（根据实际API调整）
					directionLinks: {
						东: item.vr_link + '?direction=east',
						南: item.vr_link + '?direction=south',
						西: item.vr_link + '?direction=west',
						北: item.vr_link + '?direction=north'
					}
				}))
			}
		} catch (error) {
			console.error('获取空间数据失败:', error)
		}
	}

	// 进入AR模式
	// 修改 enterAR 方法
	const enterAR = (link, direction = null) => {
		if (link.startsWith('http')) {
			isWebView.value = true
			currentARLink.value = direction ? `${link}?direction=${direction}` : link
		} else {
			isWebView.value = false
			currentARContent.value = link
		}

		showAR.value = true
		showDirectionControls.value = !isWebView.value
		// 删除 uni.hideTabBar()
	}

	// 退出AR模式
	const exitAR = () => {
		showAR.value = false

		// uni.showTabBar()
	}

	// 切换方向
	const switchDirection = (direction, space) => {
		const directionLink = space.directionLinks[direction]
		if (directionLink) {
			enterAR(directionLink, direction.toLowerCase())
		} else {
			uni.showToast({
				title: `暂无${direction}方向数据`,
				icon: 'none'
			})
		}
	}

	// 旋转视角（用于内置VR组件）
	const rotateView = (direction) => {
		// 实际实现需要根据使用的VR组件API
		console.log(`旋转方向: ${direction}`)
	}

	// WebView消息处理
	const handleWebViewMessage = (e) => {
		console.log('收到WebView消息:', e.detail)
	}

	onMounted(() => {
		fetchSpaceData()

		// 检查设备AR支持情况
		if (uni.getSystemInfoSync().platform === 'ios') {
			// iOS可能有更好的AR支持
		}
	})

	const handleBack = () => {
		uni.navigateBack();
	}
</script>

<style lang="scss" scoped>
	.home {
		width: 100%;
		min-height: 100vh;
		position: relative;

		.content {
			padding-bottom: 150rpx;

			.box {
				height: 1200rpx;
				width: 100%;
				position: relative;
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center;

				.tilte {
					position: relative;

					.tliteimg {
						width: 75rpx;
						height: 15.37rpx;
						position: absolute;
						bottom: 5rpx;
					}
				}

				.ar-entry {
					position: absolute;
					top: 200rpx;
					right: 30rpx;
					background: rgba(0, 0, 0, 0.5);
					padding: 15rpx 25rpx;
					border-radius: 50rpx;
					display: flex;
					align-items: center;
					color: #fff;
					font-size: 24rpx;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 10rpx;
					}
				}
			}

			.boxbttoom {
				width: 100%;
				height: 160rpx;
				background: rgba(0, 0, 0, 0.6);
				position: absolute;
				bottom: 0;
				display: flex;
				justify-content: center;
				gap: 20rpx;

				.item {
					width: 120rpx;
					height: 120rpx;
					background: rgba(255, 255, 255, 0.2);
					border-radius: 10rpx;
					position: relative;

					.orientation {
						width: 100%;
						height: 40rpx;
						background: rgba(0, 0, 0, 0.5);
						border-radius: 0 0 10rpx 10rpx;
						position: absolute;
						bottom: 0;
						font-weight: bold;
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}
			}
		}

		.ar-container {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 9999;
			background: #000;

			web-view,
			vr-viewer {
				width: 100%;
				height: 100%;
			}

			.ar-controls {
				position: absolute;
				bottom: 120rpx;
				left: 0;
				right: 0;
				display: flex;
				justify-content: center;
				gap: 40rpx;

				.exit-btn {
					background: rgba(255, 0, 0, 0.7);
					color: white;
					border-radius: 50rpx;
					padding: 15rpx 30rpx;
					font-size: 28rpx;
				}

				.control-btn {
					background: rgba(255, 255, 255, 0.3);
					color: white;
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
</style>